import React from 'react';
import { Checkbox, Switch, Form } from 'antd';
import { recheckWhenError } from '@/utils/formHelper';
import { SelectMonthTime, SelectQuarterTime, SelectWeekTime } from '../select';
import styles from './GuideRule.less';

const submitCheckFiledName = 'guidRuleSubmitCheck';
const options = [
    { label: '能力评估', value: '0', disabled: true },
    // { label: '任务结果', value: '1' },
    // { label: '季度绩效', value: '2' },
    { label: '人事评估', value: '3' }
];

const weekOptions = [
    { label: '能力评估', value: '0', disabled: true },
    // { label: '任务结果', value: '1' },
    { label: '人事评估', value: '3' }
];

function GuideRule({ form }) {
    const { getFieldDecorator } = form;

    const values = form.getFieldsValue();
    const handleSwitchChange = React.useCallback(() => {
        recheckWhenError(form, submitCheckFiledName);
    }, []);
    const renderMain = () => (
        <>
            <div className={styles.evaluationItem}>
                <div>
                    周评
                    {getFieldDecorator('periodW', { initialValue: false, valuePropName: 'checked' })(
                        <Switch checkedChildren="开" unCheckedChildren="关" onChange={handleSwitchChange} />
                    )}
                </div>
                <div style={{ display: values.periodW ? 'block' : 'none' }}>
                    <div style={{ marginRight: 84 }}>
                        <span>周评时间：</span>
                        {getFieldDecorator('periodDefineW', { initialValue: '0' })(<SelectWeekTime />)}
                    </div>
                    <div style={{ marginRight: 16 }}>
                        <span>周评指标：</span>
                        {getFieldDecorator('indicatorsW', { initialValue: ['0'] })(
                            <Checkbox.Group options={weekOptions} />
                        )}
                    </div>
                </div>
            </div>
            <div className={styles.evaluationItem}>
                <div>
                    月评
                    {getFieldDecorator('periodM', { initialValue: false, valuePropName: 'checked' })(
                        <Switch checkedChildren="开" unCheckedChildren="关" onChange={handleSwitchChange} />
                    )}
                </div>
                <div style={{ display: values.periodM ? 'block' : 'none' }}>
                    <div>
                        <span>月评时间：</span>
                        {getFieldDecorator('periodDefineM', { initialValue: '0' })(<SelectMonthTime />)}
                    </div>
                    <div>
                        <span>月评指标：</span>
                        {getFieldDecorator('indicatorsM', { initialValue: ['0', '3'] })(
                            <Checkbox.Group options={options} />
                        )}
                    </div>
                </div>
            </div>
            <div className={styles.evaluationItem}>
                <div>
                    季评
                    {getFieldDecorator('periodQ', { initialValue: false, valuePropName: 'checked' })(
                        <Switch checkedChildren="开" unCheckedChildren="关" onChange={handleSwitchChange} />
                    )}
                </div>
                <div style={{ display: values.periodQ ? 'block' : 'none' }}>
                    <div>
                        <span>季评时间：</span>
                        {getFieldDecorator('periodDefineQ', { initialValue: '0' })(<SelectQuarterTime />)}
                    </div>
                    <div>
                        <span>季评指标：</span>
                        {getFieldDecorator('indicatorsQ', { initialValue: ['0', '3'] })(
                            <Checkbox.Group options={options} />
                        )}
                    </div>
                </div>
            </div>
        </>
    );

    const fieldsValue = form.getFieldsValue(['periodW', 'periodM', 'periodQ']);
    const help = React.useMemo(() => {
        const { periodW, periodM, periodQ } = fieldsValue;
        if (!periodW && !periodM && !periodQ) {
            return '请至少启用1个考评周期';
        }
        return '完成所有阶段性考评后才能发起转正申请';
    }, [fieldsValue]);

    return (
        <Form.Item help={help}>
            {getFieldDecorator(submitCheckFiledName, {
                validateTrigger: '',
                rules: [
                    {
                        validator(_, foo, callback) {
                            const { periodW, periodM, periodQ } = values;
                            if (!periodW && !periodM && !periodQ) {
                                callback('请至少启用1个考评周期');
                                return;
                            }
                            callback();
                        }
                    }
                ]
            })(renderMain())}
        </Form.Item>
    );
}

export default GuideRule;
